<template>
  <!-- head -->
  <div class="headwrap">
    <van-search
      class="search"
      disabled
      shape="round"
      background="#fff"
      placeholder="请输入搜索关键词"
    />
  </div>

  <!-- vant layout布局 -->
  <van-row class="van_row" justify="space-between">
    <van-col class="div_scroll" span="6">
      <!-- 侧边导航栏 -->
      <van-sidebar v-model="sidebarActiveVal" @change="onChangeFn">
        <van-sidebar-item
          v-for="item in searchData.categoryList"
          :key="item.id"
          :title="item.name"
        />
      </van-sidebar>
    </van-col>
    <van-col class="div_scroll" span="18">
      <div class="contetn">
        <div
          class="content_item"
          v-for="item2 in searchData.currentCategory"
          :key="item2.id"
        >
          <div class="content_top">
            <img :src="item2.banner_url" />
            <span>{{ item2.front_name }}</span>
          </div>
          <div class="content_title">{{ item2.name }}</div>
          <div class="content_select">
            <van-grid :column-num="3">
              <van-grid-item
                v-for="value in 16"
                :key="value"
                icon="photo-o"
                text="文字"
              />
            </van-grid>
          </div>
        </div>
      </div>
    </van-col>
  </van-row>
</template>

<script>
import { getSearchInfo } from "../../api/classify";
import { toast } from "../../utils/vanToast";
import { ref, reactive, onMounted } from "vue";

export default {
  name: "search",

  setup() {
    //侧边导航栏 索引
    let sidebarActiveVal = ref(0);
    //侧边栏切换事件
    const onChangeFn = (inx) => {
      console.log(inx);
    };

    const searchData = reactive({
      categoryList: [],
      currentCategoryObj: {},
      currentCategory: [],
    });

    onMounted(async () => {
      const { data } = await getSearchInfo();
      if (data.errno != 0) {
        return toast("加载失败", "fail");
      }
      console.log("这是所有页", data.data);
      console.log(data.data.currentCategoryObj);
      searchData.categoryList = data.data.categoryList;
      searchData.currentCategoryObj = data.data.currentCategory;
      for (let key in searchData.currentCategoryObj) {
        searchData.currentCategory.push({
          key: key,
          value: searchData.currentCategoryObj[key],
        });
        console.log(searchData.currentCategory);
      }
    });
    return {
      sidebarActiveVal,
      onChangeFn,
      searchData,
    };
  },
};
</script>

<style lang="less" scoped>
.headwrap {
  width: 100%;
  left: 0;
  top: 0;
  z-index: 999;
}
// 固定主体内容区域
.van_row {
  width: 100%;
  height: 100vh;
  position: fixed;
  // 如果页面内容超出，则隐藏超出的内容并且实现滚动进行展示
  .div_scroll {
    height: 100%;
    overflow: hidden;
    overflow-y: scroll;
  }
}
</style>
